# vue 2.0+ API
[TOC]
# 全局配置
Vue.config
是一个对象,包含Vue的全局配置。可以在启动应用之前修改下列属性:
# silent
类型:
boolean
默认值:
false
用法:
Vue.config.silent = true
取消Vue所有的日志与警告。:smile
# optionMergeStrategies
类型:
{ [key: string]: Function }
默认值:
{}
用法:
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { return child + 1 } const Profile = Vue.extend( { _my_option: 1 }) //Profile.options._my_option = 2
自定义合并策略的选项。
合并策略选项分别接收在父实例和子实例上定义的该选项的值作为第一个和第二个参数,Vue实例上下文被作为第三参数传入。
# devtools
类型:
boolean
默认值:
true
(生产版为false
)用法:
//务必在加载 Vue 之后,立即同步设置以下内容 Vue.config.devtools = true
配置是否允许 vue-devtools 检查代码。开发版本默认为
true
,生产版本默认为false
。生产版本设为true
可以启用检查。
# errorHandler
类型:
Function
默认值:
undefined
用法:
Vue.config.errorHandler = function (err, vm, info) { //handle error //`info` 是 Vue 特定的错误信息,比如错误所有的生命周期钩子 // 只有在 2.2.0+可用 }
指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时,可获取错误信息和Vue实例。
从 2.2.0 起,这个钩子也会捕获组件生命周期钩子里的错误。同样的,当这个钩子是
undefined
时,被捕获的错误会通过console.error
输出而避免应用崩溃。从 2.4.0 起,这个钩子也会捕获Vue自定义事件处理函数内部的错误了。
从 2.6.0 起,这个钩子也会捕获
v-on
DOM监听器内部抛出的错误。另外,如果任务被覆盖的钩子或处理函数返回一个 Promise 链(例如async函数),则来自其 Promise 链的错误也会被处理。错误追踪服务 Sentry (opens new window)和Bugsnag (opens new window)都通过此选项提供了官方支持。
# warnHandler
类型:
Function
默认值:
undefined
用法:
Vue.config.warnHandler = function (msg, vm, trace) { // `trace` 是组件的继承关系追踪 }
为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效,在生产环境下会被忽略。
# ingoredElements
类型:
Array<string | RegExp
默认值:[]
用法:
Vue.config.ingoredElements = [ 'my-custom-web-component', 'another-web-component', // 用一个 ‘RegExp’ 忽略所有 "icon-"开头的元素 // 公在 2.5+ 支持 /^icon-/ ]
须使 Vue 忽略在 Vue 之外的自定义元素(e.g. 使用了 Web components APIs)。否则,它会假设你忘记注册全局组件或者拼错了组件名称,从而抛出一个关于
Unknow custom element
的警告。
# keyCodes
类型:
{ [key:string]: number | Array<number> }
默认值:
{}
用法:
Vue.config.keyCodes = { v: 86, f1: 112, // camelCase 不可用 mediaPlayPause: 179, // 取而代之的是 kebab-case 且用双引号括起来 “media-play-pause”:179, up: [38, 87] }
<input type="text" @keyup.media-play-pause="method">
给
v-on
自定义键位别名。
# performance
2.2.0 新增
- 类型:
boolean
- 默认值:
false (自 2.2.3 起)
- 用法:
设置为
true
以在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。只适用于开发模式和支持performance.mark
API的浏览器上。
# productionTip
2.2.0 新增
- 类型:
boolean
- 默认值:
true
- 用法:
设置为
false
以阻止 vue 在启动时生成生产提示。
# 全局API
# Vue.extend( options )
参数:
{Object} options
用法: 使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。
data
选项是特例,需要注意 - 在Vue.extend()
中它必须是函数。<div id="mount-point"></div>
// 创建构造器 var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: function () { return { firstName: 'Walter', lastName: 'White', alias: 'Heisenberg' } } }) // 创建 Profile 实例,并挂载到一个元素上。 new Profile().$mount('#mount-point')
结果如下:
<p>Walter White aka Heisenberg</p>
# Vue.nextTick( [callback,context] )
参数:
{Function} [callback]
{object} [context]
用法: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。
// 修改数据 vm.msg = 'Hello' // DOM 还没有更新 Vue.netxtTick(function () { // DOM 更新了 }) // 作为一个 Promise 使用 (2.1.0) Vue.nextTick().then(function () { // DOM 更新了 })
2.1.0 起新增:如果没有提供回调且在支持 Promise的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不原生支持 Promise (IE:你们都看我干嘛),你得自己提供 polyfill。
# Vue.set( target, key, value)
参数:
{Object | Array} target
{string | number} key
{any} value
返回值:设置的值。
用法: 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性(比如
this.myObject.newProperty = 'hi'
)注意对象不能是 Vue 实例,或者 Vue 实例的根数据对象。
# Vue.delete( target, key )
参数:
{Object | Array} target
{string | number} key/index
仅在 2.2.0+版本中支持 Array + index用法
用法:
删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制,但是你应该很少会使用它。
在 2.2.0+ 中同样支持在数据上工作
目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。
# Vue.directive( id, [definition] )
*参数:
{string} id
{Function | Object} [definition]
用法:
注册或获取全局指令。
// 注册 Vue.derective('my-directive', { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} }) // 注册 (指令函数) Vue.directive('my-directive', function () { // 这里将会被 'bind' 和 'update' 调用 }) // getter, 返回已注册的指令 var myDirective = Vue.directive('my-directive')
# Vue.filter( id, [definition])
参数:
{string} id
{Function} [definition]
用法: 注册或获取全局过滤器。
// 注册 Vue.filter('my-filter', function (value){ // 返回处理后的值 }) // getter,返回已注册的过滤器 var myFilter = Vue.filter('my-filter')
# Vue.component( id, [definition] )
参数:
{string} id
{Function | Object} [definition]
用法: 注册或获取全局组件。注册还会自动使用给定的
id
设置组件的名称。// 注册组件,传入一个扩展过的构造器 Vue.component('my-component',Vue.extend({ /* ... */ })) // 注册组件,传入一个选项对象 (自动调用 Vue.extend) Vue.component('my-component',{ /* .. */ }) // 获取注册的组件(始终返回构造器) var MyComponent = Vue.component('my-component')
# Vue.use( plugin )
参数:
{Object | Function} plugin
用法: 安装Vue.js插件。如果插件是一个对象,必须提供
install
方法。如果插件是一个函数,它会被作为install
方法。install
方法调用时,会将 Vue 作为参数传入。该方法需要在调用
new Vue()
之前被调用。当
install
方法被同一个插件多次调用,插件将只会被安装一次。
# Vue.mixin( mixin )
参数:
{Object} mixin
用法:
全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。
# Vue.compile( template )
参数:
{string} template
用法:
在 render 函数中编译模板字符串。只在独立构建时有效
var res = Vue.compile('<div><span>{{msg }}</span></div>') new Vue({ data: { msg: 'hello' }, render: res.render, staticRenderFns: res.staticRenderFns })
# Vue.observable( object )
2.6.0 新增
参数:
{Object} object
用法: 让一个对象可响应。Vue 内部会用它来处理
data
函数返回的对象。返回的对象可以直接用于==渲染函数==和==计算属性==内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景:
const state = Vue.observable({ count: 0 }) const Demo = { render(h) { return h('button', { on: { click: () => { state.count++ }} }, `count is: ${state.count}`) } }
在 Vue 2.x 中,被传入的对象会直接被
Vue.observable
改变,所以如这里展示的,它和被返回的对象是同一个对象。在Vue 3.x中,则会返回一个可响应的代理,而对源对象直接进行修改仍然是不可响应的。因此,为了向前兼容,我们推荐始终操作使用Vue.observable
返回的对象,而不是传入源对象。
# Vue.version
细节:提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用,你可以根据不同的版本号采取不同的策略。
用法:
var version = Number(Vue.version.split('.')[0]) if (version === 2) { //Vue v2.x.x } else if (version === 1) { //Vue v1.x.x } else { // Unsupported versions of vue }
# 选项/数据
# data
类型:
Object | Function
限制:组件的定义只接受
function
。详细: Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对):浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象。
一旦观察过,不需要再次在数据对象上添加响应式属性。因此推荐在创建实例之前,就声明所有的根级响应式属性。
实例创建之后,可以通过
vm.$data
访问原始数据对象。Vue 实例也代理了 data 对象上所有的属性,因此访问vm.a
等价于访问vm.$data.a
。以
_
或$
开头的属性不会被 Vue实例代理,因为它们可能和 Vue 内置的属性、API方法冲突。你可以使用例如vm.$data._property
的方式访问这些属性。当一个组件被定义,
data
必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果data
仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供data
函数,每次创建一个新实例后,我们能够调用data
函数,从而返回初始数据的一个全新副本数据对象。如果需要,可以通过将
vm.$data
传入JSON.parse(JSON.stringify(...))
得到深拷贝的原始数据对象。示例:
var data = { a: 1 } // 直接创建一个实例 var vm = new Vue({ data: data }) vm.a // => 1 vm.$data === data // => true // Vue.extend() 中 data 必须是函数 var Component = Vue.extend({ data: function () { return { a: 1 } } })
注意,如果你为
data
属性使用了箭头函数,则this
不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。data: vm => ({ a: vm.myProp })
# props
类型:
Array<string> | Object
详细: props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值。
示例:
// 简单语法 Vue.component('props-demo-simple', { props: ['size', 'myMessage'] }) // 对象语法,提供校验 Vue.component('props-demo-advanced',{ props: { // 检测类型 height; Number, // 检测类型 + 其他验证 age: { type: Number, default: 0, required: true, validator: function (value) { return value >= 0 } } } })
# propsData
类型:
{ [key: string]: any }
限制:只用于
new
创建的实例中。详细: 创建实例时传递props。主要作用是方便测试。
示例:
var Comp = Vue.extends({ props: ['msg'], template: '<div>{{msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } })
# computed
类型:
{ [key: string]: Function | { get: Function, set: Function}}
详细: 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
注意如果你为一个计算属性使用了箭头函数,则
this
不会指向这个组件的实例,不过你仍然可以将其实例作为函数的第一个参数来访问。computed: { aDouble: vm => vm.a* 2 }
计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。注意,如果某个依赖(比如非响应式属性)在该实例范畴之外,则计算属性是不会被更新的。
示例:
var vm = new Vue({ data: { a: 1 }, computed: { // 仅读取 aDouble: function () { return this.a * 2 }, // 读取和设置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus // => 2 vm.aPlus = 3 vm.a // => 2 vm.aDouble // => 4
# methods
类型:
{ [key: string]: Function }
详细: methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的
this
自动绑定为 Vue 实例。注意,不应该使用箭头函数来定义method函数(例如
plus:()=>this.a++
)。理由是箭头函数绑定了父级作用域的上下文,所以this
将不会按照期望指向 Vue 实例,this.a
将是 undefined。示例:
var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } } }) vm.plus() vm.a // 2
# watch
类型:
{ [key: string]: string | Function | Object | Array }
详细:
一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用
$watch
,遍历 watch 对象的每个属性。示例:
var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 方法名 b: 'someMethod', // 深度 watcher c: { handler: function (val, oldVal){ /* ... */ }, deep: true }, // 该回调将会在侦听开始之后被立即调用 d: { handler: function (val, oldVal) { /* ... */ }, immediate: true }, e: [ 'handle1', function hande2 (vall, oldVal) { /* ... */ }, { handler: function handle3 (val, oldVal) { /* ... */ },/* ... */ } ], //watch wm.e.f's value: {g: 5} 'e.f': function (val, oldVal) { /* ... */} } }) vm.a = 2 // => new: 2, old: 1
注意,不应该使用箭头函数来定义 watcher 函数(例如
searchQuery:newValue =>this.updateAutocomplete(newValue)
)。理由是箭头函数绑定了父级作用域的上下文,所以this
将不会按照期望指向 Vue 实例,this.updateAutocomplete
将是 undefined。
# 选项/DOM
# el
类型:
string | Element
限制:只在由
new
创建的实例中遵守。详细: 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
在实例挂载之后,元素可以用
vm.$el
访问。如果在实例化时存在这个选项,实例将立即进入编译过程,否则,需要显式调用
vm.$mount()
手动开启编译。提供的元素只能作为挂载点。不同于 Vue 1.x,所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到
html
或者<body>
上。如果
render
函数和template
属性都不存在,挂载 DOM 元素的 HTML 会被提取出来用作模板,此时,必须使用 Runtime + Compiler 构建的 Vue 库参考:
# template
类型:
string
详细: 一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发插槽。
如果值以
#
开始,则它将被用作选择符,并使用匹配元素的innerHTML作为模板。常用的技巧是用<script type="x-template">
包含模板。出于安全考虑,你应该只使用你信任的 Vue 模板。避免使用其它人生成的内容作为你的模板。
如果 Vue 选项中包含渲染函数,该模板将被忽略。
参考:
# render
类型:
(createElement: () => VNode) => VNode
详细:
字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力,该渲染函数接收一个
createElement
方法作为第一个参数用来创建VNode
。如果组件是一个函数组件,渲染函数还会接收一个额外的
context
参数,为没有实例的函数组件提供上下文信息。Vue 选项中的
render
函数若存在,则 Vue 构造函数不会从template
选项或通过el
选项指定的挂载元素中提取出 HTML 模板编译渲染函数。参考:渲染函数
# randerError
2.2.0 新增
类型:
(createElement: () => VNode, error: Error) => VNode
详细: 只在开发者环境下工作。 当
render
函数遭遇错误时,提供另外一种渲染输出。其错误将会作为第二个参数传递到renderError
。这个功能配合 hot-reload 非常实用。示例:
new Vue({ render (h) { throw new Error('oops') }, renderError (h, err) { return h('pre',{ style: { color: 'red' }}, err.stack) } }).$mount('#app')
# 选项/生命周期钩子
所有的生命周期钩子自动绑定
this
上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos()
)。这是因为箭头函数绑定了父上下文,因此this
与你期待的 Vue 实例不同,this.fetchTodos
的行为未定义。
# beforeCreate
- 类型:
Function
- 详细: 在实例初始化之后,数据观测(data observer)和 event/watcher 事件配置之前被调用。
- 参考:生命周期图示 (opens new window)
# created
- 类型:
Function
- 详细:
在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,
$el
属性目前不可见。
# beforeMount
- 类型:
Function
- 详细:
在挂载开始之前被调用:相关的
render
函数首次被调用。 该钩子在服务器渲染期间不被调用。 - 参考:生命周期图示 (opens new window)
# mounted
类型:
Function
详细:
el
被新创建的vm.$el
替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当mouted
被调用时vm.$el
也在文档内。 注意mounted
不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉mounted
:mounted: function () { this.$nextTick(function () { // Code that will run only after the //entire view has been renderdd }) }
该钩子在服务器端渲染期间不被调用。
# beforeUpdate
类型:
Function
详细: 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
该钩子在服务器渲染期间不被调用,因为只有初次渲染会在服务端进行。
# updated
类型:
Function
详细: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下,你应该避免在此期间更改状态。如果要相应状态改变,通常最好使用计算属性或 watcher 取而代之。
注意
update
不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用vm.$nextTick替换掉updated
:update: function () { this.$nextTick(function (){ // Code that will run only after the // entire view has been re-rendered }) }
该钩子在服务器端渲染期间不被调用。
# activated
类型:
Function
详细: keep-alive组件激活时调用。
该钩子在服务器端渲染期间不被调用。
参考:
# deactivated
类型:
Function
详细: keep-alive组件信用时调用。
该钩子在服务器端渲染期间不被调用。
参考:
# beforeDestroy
类型:
Function
详细: 实例销毁之前调用。在这一步,实例仍然完全可用。
该钩子在服务器端渲染期间不被调用。
# destroyed
类型:
Function
详细: Vue 实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用。
# errorCaptured
2.5.0+ 新增
类型:
(err: Error, vm: Component, info: string) => ?boolean
详细: 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回
fasle
以阻止该错误继续向上传播。你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的知足条件非常重要,它可以防止当一个错误被捕获时该有组件进入一个无限的渲染循环。
错误传播规则
- 默认情况下,如果全局的
comfig.errorHandler
被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报。 - 如果一个组件的继承或父级从属链路中存在多个
errorCaptured
钩子,则它们将会被相同的错误逐个唤起。 - 如果此
errorCaptured
钩子自身抛出一个错误,则这个新错误和原本被捕获的错误都会发送给全局的config.errorHandler
。 - 一个
errorCaptured
钳子能够返回false
以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的errorCaptured
钩子和全局的config.errorHandler
。
- 默认情况下,如果全局的
# 选项/资源
# directives
- 类型:
Object
- 详细: 包含Vue实例可用指令的哈希表。
- 参考:自定义指令 (opens new window)
# filters
类型:
Object
详细:
包含 Vue 实例可用过滤器的哈希表。
参考:
Vue.filter
# components
- 类型:
Object
- 详细: 包含 Vue 实例可用组件的哈希表。
# 选项/组合
# parent
类型:
Vue instance
详细:
指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用
this.$parent
访问父实例,子实例被推入父实例的$children
数组中。节制地使用
$parent
和$children
- 它们的主要目的是作为访问组件的应急方法。更推荐用props
和events
实现父子组件通信。
# mixins
类型:
Array<Object>
详细:
mixins
选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在Vue.extend()
里最终选择使用相同的选项合并逻辑合并。举例:如果你的混入包含一个钩子而创建组件本身也有一个,两个函数将被调用。Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用。
示例:
var mixin = { created: function () { console.log(1) } } var vm = new Vue({ created: function () { console.log(2) }, mixins: [mixin] }) // => 1 // => 2
# extends
类型:
Object | Function
详细: 允许声明扩展另一个组件(可以是一个简单的选项对象或构造函数),而无需使用
Vue.extend
。这主要是为了全球扩展单文件组件。这和
mixins
类似。示例:
var CompA = { ... } // 在没有调用 `Vue.extend`的时候继承 CompA var CompB = { extends: CompA, ... }
# provide / inject
2.2.0 新增
类型:
- provide:
Object | () => Object
- inject:
Array<string> | { [key: string]: string | Symbol | Object}
- provide:
详细:
provide
和inject
主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React ,这与 React 的上一文特性很相似。
provide
选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持Symbol
和Reflect.ownkeys
的环境下可工作。inject
选项应该是:- 一个字符串数组,或
- 一个对象,对象的key是本地的绑定名,value 是:
- 在可用的注入内容中搜索用的key(字符串或 Symbol),或
- 一个对象,该对象的:
from
属性是在可用的注入内容中搜索用的key(字符串或Symbol)default
属性是降级情况下使用的 value
提示:
provide
和inject
绑定并不是可响应的。这是刻意为之的。然而如果你传入一个可监听的对象,那么其对象的属性还是可响应的。示例:
// 父级组件提供 'foo' var Provider = { provide: { foo: 'bar' }, // ... } // 子组件注入 ‘foo' var Child = { inject: ['foo'], created () { console.log(this.foo) // =>"bar" } // ... }
利用 ES2015 Symbols、函数
provide
和对象inject
:const s = Symbol() const Provider = { provide () { return { [s]: 'foo' } } } const Child = { inject: { s }, // ... }
接下来2个例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时,注入的值会在
props
和data
初始化之后得到。使用一个注入的值作为一个属性的默认值:
const Child = { inject: ['foo'], props: { bar: { default () { return this.foo } } } }
使用一个注入的值作为数据入口:
const Child = { inject: ['foo'], data () { return { bar: this.foo } } }
在 2.5.0+ 的注入可以通过设置默认值使其变成可选项:
const Child = { inject: { foo: { default: 'foo'} } }
如果它需要从一个不同名字的属性注入,则使用
from
来表示其源属性:const Child = { inject: { foo: { from: 'bar', default: 'foo' } } }
与prop 的默认值类似,你需要对非原始值使用一个工厂方法:
const Child = { inject: { foo: { from: 'bar', default: () => [1,2,3] } } }
# 选项/其它
# name
类型:
string
限制:只有作为组件选项时起作用。
详细:
允许组件模板递归地调用自身。注意,组件在全局用
Vue.component()
注册时,全局 ID 自动作为组件的 name。指定
name
选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。另外,当在有 vue-devtools,未命名组件将显示成<AnonymousComponent>
,这没有语义。通过提供name
选项,可以获得更有语义信息的组件树。
# delimiters
类型:
Array<string>
默认值:
[", "]
限制:这个选项只在完整构建版本中的浏览器内编译时可用。
详细: 改变纯文本插入分隔符。
示例:
new Vue({ delimiters: ['${','}'] }) // 分隔符变成了 ES6 模板字符串的风格。
# functional
- 类型:
boolean
- 详细:
使组件无状态(没有
data
)和无实例(没有this
上下文)。他们用一个简单的render
函数返回虚拟节点使他们更容易渲染。 - 参考:函数式组件 (opens new window)
# model
2.2.0 新增
类型:
{ prop?: string, event?: string }
详细: 允许一个自定义组件在使用
v-model
时定制 prop 和 event。默认情况下,一个组件上的v-model
会把value
用作 prop 且把input
用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用value
prop来达到不同的目的。使用model
选择可以回避 情况产生的冲突。
# inheritAttrs
2.4.0 新增
类型:
boolean
默认值:
true
详细: 默认情况下父作用域的不被认作 props 的特性绑定(attribute bindings)将会“回退”且作为普通的HTML特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时,这可能不会总是符合预期行为。通过设置
inheritAttrs
到false
,这些默认行为将会被去掉。而通过(同样是2.4新增的)实例属性$attrs
可以让这些特性生效,且可以通过v-bind
显性的绑定到非根元素上。注意:这个选项不影响
class
和style
绑定。
# comments
2.4.0 新增
- 类型:
boolean
- 默认值:
false
- 限制:这个选项只在完整构建版本中的浏览器内编译时可用。
- 详细:
当设为
true
时,将会保留且渲染模板中的HTML注释。默认行为是舍弃它们。
# 实例属性
# vm.$data
- 类型:
Object
- 详细: Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
- 参考:选项 / 数据 - data (opens new window)
# vm.$props
2.2.0 新增
- 类型:
Object
- 详细: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
# vm.$el
- 类型:
Element
- 只读
- 详细: Vue 实例使用的根 DOM 元素。
# vm.$options
类型:
object
只读
详细: 用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处:
new Vue({ customOption: `foo` created: function () { console.log(this.$options.customOption) //=> 'foo' } })
# vm.$parent
- 类型:
Vue instance
- 只读
- 详细: 父实例,如果当前实例有的话。
# vm.$root
- 类型:
Vue instance
- 只读
- 详细: 当前组件树的根 Vue 实例。如果当前实例没有父实例,些实例将会是其自己。
# vm.$children
- 类型:
Array<Vue instance>
- 只读
- 详细:
当前实例的直接子组件。需要注意
$children
并不保证顺序,也不是响应式的。如果你发现自己正在尝试使用$children
来进行数据绑定,考虑使用一个数组配合v-for
来生成子组件,并且使用 Array 作为真正的来源。
# vm.$slots
类型:
{ [name: string]: ?Array<Vnode> }
只读y
详细: 用来访问被插槽分发的内容。每个具名插槽有其相应的属性(例如:
v-slot:foo
中的内容将会在vm.$slots.foo
中被找到)。default
属性包括了所有没有被包含在具名插槽中的节点,或v-slot:default
的内容。Note:
v-slot:foo
is supported in v2.6+. For older versions, you can use the deprecated syntax.在使用渲染函数书写一个组件时,访问
vm.$slots
最有帮助。示例:
<blog-post> <template v-slot:header> <h1 > About Me </h1> </template> </blog-post> <p> Here's some page content,which will be included in vm.$slot.default, because it's not inside a named slot. </p> <template v-slot:footer> <p> Copyright 2019 Evan You </p> </template> <p> If I have some content down here ,it will also be included in vm.$slot.default. </p>
Vue.component('blog-post', { render: function (createElement) { var header = this.$slot.header var body = this.$slot.default var footer = this.$slot.footer return createElement('div', [ createElement('header', header), createElement('main', body), createElement('footer', footer) ]) } })
参考:
<slot>
组件- 通过插槽分发内容
- 渲染函数 - 插槽
# vm.$scopedSlots
2.1.0 新增
- 类型:
{ [name: string]: props => Array<VNode> | undefined }
- 只读
- 详细:
用来访问作用域插槽。对于包括
默认slot
在内的每一个插槽,该对象都包含一个返回相应 VNode 的函数。vm.$scopedSlots
在使用渲染函数开发一个组件时特别有用。